<template>
	<view>
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog class="popup-content" :type="msgType" cancelText="关闭" confirmText="确认" title="请选择年龄段" content=""
				@confirm="dialogConfirm" @close="dialogClose">
				<view class="text" v-for="value in range">
					<text>{{value.text}}</text>
				</view>
				</uni-popup-dialog>
		</uni-popup>
	</view>
	<view class="page">
		<view class="zuishangcen">
			<text>育儿百科</text>
		</view>
		<view class="header">
			<view class="button" @click="dialogToggle('success')">
				<text class="button-text success-text">1-3岁</text>
				<image src="/static/img/sanjiaoxing.png" mode=""></image>
			</view>
			<view class="sousuokuang" @tap="search">
				<img src="/static/img/fangdajing.png" alt="">
				<input type="text" placeholder="搜索育儿知识" class="sousuo">
			</view>
		</view>
		<view class="datupian">
				<img src="/static/img/ceshi.png" alt="">
		</view>
		<view class="biaotione">
			<text>幼儿护理</text>
		</view>
		<view class="nav1">
			
			
				<view class=""   v-for="yangyu in youerhulibiebiao" @click="gotoliebiao(yangyu.id,yangyu.typeName)"   >
					<text>{{yangyu.typeName}}</text>
							
				</view>
			
		
			

		</view>
		<view class="biaotione">
			<text>幼儿成长发育</text>
		</view>

		<view class="nav1">
			
			<view class=""   v-for="fayu in chengchangfayu"  @click="gotoliebiao(fayu.id,fayu.typeName)"    >
				<text>{{fayu.typeName}}</text>
						
			</view>
	

		</view>
		
	




	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 0,
				range: [{
						value: 0,
						text: "孕期"
					},
					{
						value: 1,
						text: "0-1岁"
					},
					{
						value: 2,
						text: "1-3岁"
					},
				],
				token:'',
				kexueyangyuliebiao:[],
				youerhulibiebiao:[],
				chengchangfayu:[]
			}
		},
		onLoad() {
			console.log("百科")
			this.token=uni.getStorageSync("Authorization")
			console.log(this.token)
				this.huoqukexueyangyu()

		},
		methods: {

			gotoliebiao(id,typeName) {
					uni.navigateTo({
						url:"/pages/shicaitiaoxuan/shicaitiaoxuan?id="+id+"&typeName="+typeName
					})
			},
	

			dialogToggle(type) {
				this.msgType = type
				this.$refs.alertDialog.open()
			},
			dialogConfirm() {
				console.log('点击确认')
				this.messageText = `点击确认了 ${this.msgType} 窗口`
				
			},
			dialogClose() {
				console.log('点击关闭')
			},
			search(){
				uni.navigateTo({
					url:'/pages/search/search'
				})
			},
			huoqukexueyangyu(){
				uni.request({
					url:this.$serverUrl + "/api/sciencyType?pageSize=100",
					header:{
						Authorization:this.token
					},
					success: (result) => {
						this.kexueyangyuliebiao=result.data.data.records
						console.log("育儿百科列表",this.kexueyangyuliebiao)
						let length1=this.kexueyangyuliebiao.length
						for(var i=0;i<length1;i++){
							if(this.kexueyangyuliebiao[i].mianTypeName=="幼儿护理"){
								this.youerhulibiebiao.push(this.kexueyangyuliebiao[i])
								
							}else{
								this.chengchangfayu.push(this.kexueyangyuliebiao[i])
							}
							
						}
						
					},
					fail: (error) => {
						console.log(error)
					}
					
				})
			}
		}
	}
</script>



<style lang="scss">
	.page {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	@mixin flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}
	.zuishangcen{
		margin-top: 12%;
		width: 100%;
		height: 40px;
		border-bottom: 2px solid  #e9e9e9;
		margin-bottom: 10px;
		
	}
	.zuishangcen text{
		margin-left: 5%;
		font-size: 27px;
		font-weight: bold;
		height: 30px;
		line-height: 30px;
		
	}

	.popup-content {
		@include flex;
		padding: 15px;
		display: flex;
		flex-direction: column;
	}



	.button {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 35px;
		margin: 0 5px;
		border-radius: 5px;
		width: 18.6%;
		margin-left: 10px;
	}

	.button image {
		height: 15px;
		width: 15px;
	}


	.button-text {
		color: #666ee8;
		font-size: 15px;
	}


	.text {
	
		width: 200px;
		height: 40px;
		
		border-bottom: 1px solid black;
		text-align: center;
		border-top: 1px solid black;
	}

	.text text {
		color: #bcbcbc;
		display: block;
		height: 40px;
		line-height: 40px;
		font-size: 25px;
	}
	.header{
		display: flex;
		flex-direction: row;
	}
	.sousuokuang{
		margin-left: 10px;
		width: 70%;
		height: 35px;
		background: #ececec;
		border-radius: 40rpx;
		display: flex;
	}
	.sousuokuang image{
		display: inline-block;
		width: 35px;
		height: 35px;
		
	}
	.sousuo{
		height: 35px;
		display: inline-block;
		width: 100%;
		font-size: 15px;
	}
	.datupian{
		margin: 30rpx 23px 30rpx 23px;
		width: 89.8%;
		height: 250rpx;
		border-radius: 10px;
	}
	.datupian image{
		width: 100%;
		height: 100%;
		border-radius: 10px;
	}
	.biaotione{
		display: inline-block;
		width: 100%;
		height: 30px;
		line-height: 30px;
		font-size: 17px;
		text-align: center;
	}
	.nav1{
		width: 90%;
	
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin: 20px 30px 20px 30px;
		align-items: center;
		justify-content: space-around;
		
	}
	.nav1 view {
		
		width: 120px;
		height: 45px;
		text-align: center;
		background:#f0f1fd;
		border-radius: 5px;
		margin-bottom: 10px;
		
	}
	.nav1 text{
		width: 100px;
		height: 45px;
		line-height: 45px;
		color: #9795eb;
		
	}
	
	
</style>
